<template>
  <div>
    <div class="top">
      <el-row>
        <el-col span="12">
          <el-form-item label="品牌">
            <el-select
              v-model="categoryBrand.brandId"
              class="m-2"
              placeholder="选择品牌"
              size="small"
              style="width: 780px"
            >
              <el-option
                v-for="item in brand"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="分类">
            <el-cascader
              :props="props"
              style="width: 780px"
              v-model="categoryBrand.categoryId"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display: flex; margin-bottom: 10px; margin-left: 15px">
        <el-button type="primary" @click="loadData" size="small">
          搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
    </div>

    <!-- 添加按钮 -->
    <div class="btn">
      <el-button size="small" type="success" @click="addShow">添加</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="categoryBrandList" style="width: 100%; margin-top: 15px">
      <el-table-column prop="categoryName" label="分类" width="320px" />
      <el-table-column prop="brandName" label="品牌" width="320px" />
      <el-table-column prop="brandLogo" label="品牌图标" width="320px">
        <template #default="scope">
          <img :src="scope.row.brandLogo" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="320px" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="loadData"
      @current-change="loadData"
      style="margin-top: 20px"
    />
    <!-- 弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="添加或修改" width="600px">
      <el-form>
        <el-form-item label="品牌" label-width="100px">
          <el-select v-model="categoryBrandForm.brandId" placeholder="选择品牌">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in brand"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分类" label-width="100px">
          <el-cascader
            :props="props"
            style="width: 780px"
            v-model="categoryBrandForm.categoryId"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handlerSaveOrUpdate">
            提交
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Brands } from '@/api/brand'
import { GetCategoryByPid } from '@/api/category'
import {
  GetCategoryBrandList,
  DeleteCategoryBrand,
  SaveCategoryBrand,
  UpdateCategoryBrand,
} from '@/api/categoryBrand'
import { ElMessage, ElMessageBox } from 'element-plus'
//页面初始化数据
const categoryBrandList = ref([])
const categoryBrand = ref({})
const loadData = async () => {
  if (
    categoryBrand.value.categoryId &&
    categoryBrand.value.categoryId.length === 3
  ) {
    categoryBrand.value.categoryId = categoryBrand.value.categoryId[2]
  }
  const { data } = await GetCategoryBrandList(
    pageNum.value,
    pageSize.value,
    categoryBrand.value
  )
  categoryBrandList.value = data.list
  // console.log(categoryBrandList.value);
  total.value = data.total
}
//页面挂载
onMounted(() => {
  mountBrand()
  loadData()
})
//重置方法
const resetData = () => {
  categoryBrand.value = {}
  loadData()
}
//添加或修改
//弹窗
const dialogFormVisible = ref(false)
const categoryBrandForm = ref({})
//添加
const addShow = () => {
  dialogFormVisible.value = true
  categoryBrandForm.value = {}
}

const handlerSave = async () => {
  categoryBrandForm.value.categoryId = categoryBrandForm.value.categoryId[2]
  if (categoryBrandForm.value.categoryId && categoryBrandForm.value.brandId) {
    await SaveCategoryBrand(categoryBrandForm.value)
  }
  loadData()
  dialogFormVisible.value = false
  ElMessage.success('添加成功')
}

//修改
const handleEdit = row => {
  Object.assign(categoryBrandForm.value, row)
  dialogFormVisible.value = true
}

const handlerUpdate = async () => {
  if (
    typeof categoryBrandForm.value.categoryId === 'object' &&
    categoryBrandForm.value.categoryId.length === 3
  ) {
    categoryBrandForm.value.categoryId = categoryBrandForm.value.categoryId[2]
  }

  await UpdateCategoryBrand(categoryBrandForm.value)
  loadData()
  dialogFormVisible.value = false
  ElMessage.success('修改成功')
}

const handlerSaveOrUpdate = () => {
  if (categoryBrandForm.value.id) {
    //修改
    handlerUpdate()
  } else {
    //添加
    handlerSave()
  }
}

//删除
const handleDelete = row => {
  ElMessageBox.confirm(`确定删除当前分类品牌吗?`, 'Warning', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await DeleteCategoryBrand(row.id)
      loadData()
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'success',
        message: '取消删除',
      })
    })
}
//分页器
const pageNum = ref(1)
const pageSize = ref(3)
const total = ref(0)
//品牌select选择器
const brand = ref([])
const mountBrand = async () => {
  const { data } = await Brands()
  brand.value = data
}
//分类级联选择器
let pid = 0
const props = {
  label: 'name',
  leaf: 'leaf',
  value: 'id',
  lazy: true,
  async lazyLoad(node, resolve) {
    if (node.data.id) {
      pid = node.data.id
    }
    const { data } = await GetCategoryByPid(pid)
    data.forEach(element => {
      element.leaf = !element.hasChildren
    })
    resolve(data)
  },
}
</script>

<style>
.top {
  background-color: #fff;
  height: 80px;
  padding-top: 15px;
  padding-left: 10px;
}
.btn {
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
  padding-left: 15px;
}
</style>
